<!DOCTYPE html>
<html layout:decorate="~{layout}" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<head>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>

    <title th:text="#{cas.login.pagetitle}">Gua Display User Graphics View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3" role="main">
    <div class="d-flex justify-content-center" id="login" layout:fragment="content">
        <div class="mdc-card mdc-card-content w-lg-50 p-4">
            <h2 class="text-center" th:text="${guaUsername}">guaUsername</h2>
            <div class="banner banner-danger d-flex m-4 p-4" role="alert">
                <i class="mdi mdi-alert-octagon"></i>
                <strong th:utext="#{screen.gua.confirm.message}">If you do not recognize this image as yours, do NOT
                    continue.</strong>
            </div>

            <div class="d-flex align-items-center flex-column">
                <div class="my-3">
                    <img style="width:130px;height:130px;border-radius:20%;
                                box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
                                border: 1px solid #ddd;border-radius: 4px;"
                         th:src="@{'data:image/jpeg;base64,' + ${guaUserImage}}"/>
                </div>
                <form class="fm-v clearfix" id="fm1" method="post" th:action="@{/login}">
                    <input name="username" th:value="${guaUsername}" type="hidden"/>
                    <input name="execution" th:value="${flowExecutionKey}" type="hidden"/>
                    <input name="_eventId_submit" type="hidden" value="Continue"/>
                    <button accesskey="l" class="mdc-button mdc-button--raised">
                        <span class="mdc-button__label" th:text="#{screen.button.continue}">Login</span>
                    </button>
                </form>
            </div>
        </div>

    </div>
</main>
</body>

</html>